<script setup lang="ts">
import {reactive} from 'vue'

const data = reactive({
  authMode: ''
})

</script>

<template>
  <div class="hor-layout">
    <div class="ver-layout" style="flex: 1">
      <img style="height: calc(100% - 20%);margin: auto" src="../../../assets/img/phone-demo.png">
    </div>

    <div class="authorize-layout ver-layout" style="flex: 1.5">
      <div class="authorize-title">授权须知：</div>
      <ul class="authorize-content">
        <li>请确保设备连接正常、稳定；</li>
        <li>授权设备不可以登录设置中的账号。如果已登录账号请开始授权前退出。</li>
        <li>按照企业要求刷DO或者PO权限，解释权归企业所有。</li>
        <li>请确认您的设备正常安装了ADB客户端。</li>
      </ul>
      <div class="authorize-mode">授权模式：</div>
      <van-radio-group v-model="data.authMode" icon-size="15px" shape="square"
                       class="hor-layout-center">
        <van-radio name="a" class="check-item">DO模式授权</van-radio>
        <van-radio name="b" class="check-item">PO模式授权</van-radio>
      </van-radio-group>
      <router-link to="/authAgreement">
        <van-button class="authorize-confirm-btn" type="primary">确定</van-button>
      </router-link>
    </div>
  </div>
</template>

<style lang="less">
.authorize-layout {
  padding-top: 7%;

  .authorize-title {
    font-size: 23px;
  }

  .authorize-content {
    margin: 20px 0px;
    list-style: disc;

    li {
      line-height: 31px;
    }
  }

  .authorize-mode {
    font-size: 23px;
    margin-bottom: 20px;
  }

  .check-item {
    margin-right: 20px;
  }

  .authorize-confirm-btn {
    width: 200px;
    margin-top: 80px;
    margin-left: 20%;
  }
}
</style>
